<div class="home">
  <div class="banner">
    <!-- 头部轮播图 -->
    <nz-carousel [nzEffect]="effect" nzAutoPlay [nzAutoPlaySpeed]="2000"
      style="width: 980px;margin: 0 auto;z-index: 10;">
      <div nz-carousel-content *ngFor="let item of banners,let index = index">
        <div class="carousel-item carousel-bg" (click)="selectBannerItem(item,index)">
          <img [src]="item.imageUrl" height="350" width="980">
        </div>
      </div>
    </nz-carousel>
    <div style="position: absolute;top: 115px;left: 0;right: 0;width: 100%;height: 350px;z-index: 1;">
      <nz-carousel [nzEffect]="effect" nzAutoPlay [nzAutoPlaySpeed]="2000">
        <div nz-carousel-content *ngFor="let item of banners,let index = index">
          <div class="carousel-item carousel-bg" (click)="selectBannerItem(item,index)">
            <div class="carousel-bg" [ngStyle]="{'background-image': 'url('+item.imageUrl+')'}"></div>
          </div>
        </div>
      </nz-carousel>
    </div>
  </div>

  <div class="middle">
    <div class="middle-left">
      <div class="hot">
        <div class="hot-header">
          <div class="hot-title-first" (click)="topPlaylist()">
            热门推荐
          </div>
          <div class="hot-title" *ngFor="let item of hotTags,let index=index"
            [ngStyle]="{'border-left': index!=0?'1px solid #eee':''}" (click)="topPlaylist(item.name)">
            {{item.name}}
          </div>
          <div class="hot-more" (click)="jumpPlaylist()">
            更多<i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <!-- 加载框 -->
        <div style="text-align: center;margin: 20px 0;">
          <nz-spin nzSimple *ngIf="loadingPlaylist"></nz-spin>
        </div>
        <!-- 歌单 -->
        <div class="singer-unit">
          <div class="su-list">
            <div class="su-item" *ngFor="let item of personalized" (click)="toPlaylist(item)">
              <div class="fans" [ngStyle]="{'background-image': 'url('+item.picUrl+')'}">
                <div>
                  <span><i class="icon-erji"></i>{{item.playCount | playCount}}</span>
                  <span><i class="icon-zanting" (click)="playSheet(item)"></i></span>
                </div>
              </div>
              <div class="su-name">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 新碟上架 -->
      <div class="hot">
        <div class="hot-header">
          <div class="hot-title-first">
            新碟上架
          </div>
          <div class="hot-more" (click)="jumpAlbum()">
            更多<i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <!-- 加载框 -->
        <div style="text-align: center;margin: 20px 0;">
          <nz-spin nzSimple *ngIf="loadingAlbum"></nz-spin>
        </div>
        <!-- 专辑 -->
        <div class="singer-unit">
          <div class="su-list">
            <div class="su-item" *ngFor="let item of albumNewest" (click)="toAlbum(item)">
              <div class="album-img" [ngStyle]="{'background-image': 'url('+item.picUrl+')'}">
                <i class="icon-zanting" (click)="playAlbum(item)"></i>
              </div>
              <div class="ai-desc">
                <p>{{item.name}}</p>
                <p>{{item.artist.name}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 榜单 -->
      <div class="hot">
        <div class="hot-header">
          <div class="hot-title-first">
            榜单
          </div>
          <div class="hot-more" (click)="jumpRank()">
            更多<i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <!-- 榜单 -->
        <div class="playlist">
          <div class="playlist-top" *ngFor="let item of playlistType,let index = index"
            [ngClass]="{'pt-border': index!=0}">
            <div class="pt-header">
              <img [src]="item.img" alt="top">
              <div class="pt-title">
                <p>{{item.name}}</p>
                <p><i class="icon-zanting" style="font-size: 30px;"></i></p>
              </div>
            </div>
            <!-- 加载框 -->
            <div style="text-align: center;margin: 20px 0;">
              <nz-spin nzSimple *ngIf="loadingRank"></nz-spin>
            </div>
            <div class="pt-list">
              <div class="pt-item" *ngFor="let row of item.data,let indexRow = index">
                <div (click)="toSong(row)" class="flex">
                  <span [ngStyle]="{'color': indexRow<3?'red':'#444'}">{{indexRow }} </span>
                  <p> {{ row.name}}</p>
                </div>
                <div class="pt-item-player">
                  <i class="icon-zanting" (click)="playSong(row)"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="middle-right">
      <!-- 入驻歌手 -->
      <div class="into-singer">
        <div class="is-header">
          <span>入驻歌手</span>
          <span (click)="jumpSinger()" style="cursor: pointer;">查看全部<i class="el-icon-arrow-right"></i></span>
        </div>
        <div class="into-list">
          <div class="inot-item" *ngFor="let item of artistList,let index=index">
            <img [src]="item.picUrl" alt="image" (click)="jumpAritst(item,0)">
            <div class="singer-info">
              <p class="singer-name" (click)="jumpUser(item)">{{item.name}}</p>
              <p class="singer-num" (click)="jumpAritst(item,1)">专辑数: <span>{{item.albumSize}}</span></p>
            </div>
          </div>
        </div>

        <div class="apply-artist">
          <a href="https://music.163.com/nmusician/web/index" target="black" style="color: #222;">申请成为音乐人</a>
        </div>
      </div>

      <!-- 热门主播 -->
      <div class="into-singer">
        <div class="is-header">
          <span>热门主播</span>
        </div>
        <div class="into-list">
          <div class="inot-item" *ngFor="let item of toplistDj,let index=index">
            <img [src]="item.picUrl" alt="image">
            <div class="singer-info">
              <p class="singer-name text-over">{{item.name}}</p>
              <p class="singer-num text-over">{{item.rcmdtext}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>